<template>
  <div style="display: flex; width: 100%; height: 100%; background-color: white; flex-direction: column; overflow: hidden;">
    <vxe-toolbar ref="deaprtToolbar" size='mini' :refresh='{ query: querySubDept }'>
      <template v-slot:buttons>
        <vxe-button status='primary' @click='$refs.dropdownTable1.setAllTreeExpand(true)'>
          展开
        </vxe-button>
        <vxe-button status='primary' @click='$refs.dropdownTable1.clearTreeExpand()'>折叠
        </vxe-button>
      </template>
    </vxe-toolbar>
    <div class="flex-app-continer-table-div">
      <vxe-table ref='dropdownTable1'
                 style="overflow:auto;width: 100%;"
                 height='auto' auto-resize
                 size='mini'
                 :show-header="false"
                 transfer border show-header-overflow highlight-current-row show-overflow
                 highlight-hover-row
                 resizable
                 :tree-config="{lazy: true,expandAll:true, children: 'children', hasChild:'hasChild', line: true,  loadMethod: loadChildrenMethod}"
                 :data='tableData'>
        <vxe-column align='left' header-align='center' field='title' title='企业/部门名称'
                    tree-node></vxe-column>
        <vxe-column
          fixed='right'
          field='id'
          title='操作'
          align='center'
          width='90'
        >
          <template v-slot='{ row }'>
            <vxe-button status="primary" @click="clickxDropdown1({row})">选择</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import {postAction} from "@/api/manage.js";

export default {
  name: "elecDepart",
  data() {
    return {
      deaprtDivHeight: 0,
      tableData: [],
    }
  },
  props: {
    companyId: {
      type: String
    },
    companys: {
      type: Array
    },
    parentModal: {
      type: Object
    },
    //减去的高度
    subHeight: {
      type: Number,
      default: 180
    }
  },
  created() {
    this.calHeight()
    this.querySubDept()
  },
  mounted() {
    this.calHeight()
  },
  activated() {
    this.calHeight()
  },
  methods: {
    calHeight() {
      //this.deaprtDivHeight = window.innerHeight - this.parentModal.getPosition().top - this.subHeight
    },
    clickxDropdown1({row}) {
      this.$emit('selecetDepart', row)
    },
    async querySubDept(value, $event) {
      this.tableData = []
      let params = {}
      params.companyId = this.companyId
      // params.self = this.companys.find(value1 => value1.companyId === this.companyId).departCode;
      //只查出自己
      params.self = true
      await postAction('/sys/user/querySubDepart', params).then(
        (res) => {
          if (res.code === '0') {
            this.tableData = res.result
          }
        }, (err) => {
        }
      )
    },
    async loadChildrenMethod({row}) {
      let params = {}
      params.key = row.id
      let data = []
      await postAction('/sys/user/querySubDepart', params).then(
        (res) => {
          if (res.code === '0') {
            data = res.result
          }
        }, (err) => {
        }
      )
      return Promise.resolve(data)
    },
  }
}
</script>

<style scoped>

</style>